<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <!-- Font Awesome 图标
Font Awesome 是一套绝佳的图标字体库和CSS框架。

Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

要使用Font Awesome图标，请在HTML页面的 部分中添加以下行： -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <title>bootstrap组件-多媒体对象（12.07）</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        h2{
            margin-top: 100px;
        }
    </style>
</head>
<!-- data-spy="scroll"监听元素 -->
<!-- style="position: relative;"相对定位 -->
<body data-spy="scroll" data-target="#my_nav" style="position: relative;">
    <div class="container">
        <h2>滚动监听 </h2>
        <h2>导航栏</h2>
        <!-- navbar-expand-lg响应式的 -->
        <!-- bg-dark背景色  bg-light-->
        <!-- navbar-dark主题 -->
        <!-- <nav class="navbar navbar-expand-lg bg-dark navbar-dark" > -->
            <!-- 垂直方向显示 navbar  bg-dark navbar-dark -->
        <nav class="navbar  bg-dark navbar-dark"  id="my_nav">
            <!-- 颜色层次不同 -->
            <!-- navbar-brand高亮 -->
            <a href="#" class="navbar-brand">
                Logo
                <img style="width:100px;height: 100px;" src="img/img2.jpg">
            </a>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#" class="nav-link active" >淘宝</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link disabled" >京东</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" >闲鱼</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" >苏宁</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" >当当</a>
                </li>
            </ul>
        </nav>

        <h2>折叠导航栏</h2>
        <!-- navbar-expand-lg响应式的 -->
        <!-- bg-dark背景色  bg-light-->
        <!-- navbar-dark主题 -->
        <!-- <nav class="navbar navbar-expand-lg bg-dark navbar-dark" > -->
            <!-- 垂直方向显示 navbar  bg-dark navbar-dark -->
            <!-- fixed-top固定在顶部 -->
            <!-- fixed-bottom固定在底部 -->
        <nav class="navbar  navbar-expand-mg bg-dark navbar-dark " id="my_nav" >
            <!-- 颜色层次不同 -->
            <!-- navbar-brand高亮 -->
            <a href="#" class="navbar-brand">
                Logo
                <!-- <img style="width:100px;height: 100px;" src="img/img2.jpg"> -->
            </a>
            <!-- 定义折叠按钮 -->
            <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#myCollapse">
                <!-- navbar-toggle-icon导航切换图标 -->
                <span class="navbar-toggler-icon"></span>
            </button>
            <!-- 导航内容先放在一个div里边 -->
            <!-- 导航折叠div -->
            <div id="myCollapse" class="collapse navbar-collapse ">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a href="#s1" class="nav-link " >淘宝</a>
                    </li>
                    <li class="nav-item">
                        <a href="#s2" class="nav-link " >京东</a>
                    </li>
                    <li class="nav-item">
                        <a href="#s3" class="nav-link" >闲鱼</a>
                    </li>
                    <li class="nav-item">
                        <a href="#s4" class="nav-link" >苏宁</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link" >当当</a>
                    </li>
                </ul>
                <!-- 导航栏上表单与按钮 -->
                <form class="form-inline">
                    <input type="text" class="form-control">
                    <button class="btn btn-success">取消</button>
                </form>
                <!-- 这是普照文本 -->
                <span class="navbar-text">这是普照文本</span>
            </div>
        </nav>

        <div is="s1" class="">
            <p class="bg-primary p-5">
                四川信息职业技术学院隶属于四川省经济和信息化厅，是经四川省人民政府批准、教育部备案的全省唯一一所电子信息类公办高等职业院校。学校始建于1976年，是国家高技能人才培训基地、全国“职业院校数字校园建设实验校”、四川省示范性高职院校、省优质高职院校建设培育单位、四川省信息化人才培训基地、四川省信息网络安全专业技术人员继续教育机构、四川省高技能人才培训基地、四川省教育信息化试点单位、广元市外派人员培训基地、广元市职业技能定点培训机构、广元市农村劳动力转移培训阳光工程培训基地、广元经济开发区高端技能型人才培训中心
            </p>
        </div>
        <div is="s2" class="">
            <p class="bg-success p-5">
                四川信息职业技术学院隶属于四川省经济和信息化厅，是经四川省人民政府批准、教育部备案的全省唯一一所电子信息类公办高等职业院校。学校始建于1976年，是国家高技能人才培训基地、全国“职业院校数字校园建设实验校”、四川省示范性高职院校、省优质高职院校建设培育单位、四川省信息化人才培训基地、四川省信息网络安全专业技术人员继续教育机构、四川省高技能人才培训基地、四川省教育信息化试点单位、广元市外派人员培训基地、广元市职业技能定点培训机构、广元市农村劳动力转移培训阳光工程培训基地、广元经济开发区高端技能型人才培训中心
            </p>
        </div>
        <div is="s3" class="">
            <p class="bg-danger p-5">
                四川信息职业技术学院隶属于四川省经济和信息化厅，是经四川省人民政府批准、教育部备案的全省唯一一所电子信息类公办高等职业院校。学校始建于1976年，是国家高技能人才培训基地、全国“职业院校数字校园建设实验校”、四川省示范性高职院校、省优质高职院校建设培育单位、四川省信息化人才培训基地、四川省信息网络安全专业技术人员继续教育机构、四川省高技能人才培训基地、四川省教育信息化试点单位、广元市外派人员培训基地、广元市职业技能定点培训机构、广元市农村劳动力转移培训阳光工程培训基地、广元经济开发区高端技能型人才培训中心
            </p>
        </div>
        <div is="s4" class="">
            <p class="bg-info"> p-5">
                四川信息职业技术学院隶属于四川省经济和信息化厅，是经四川省人民政府批准、教育部备案的全省唯一一所电子信息类公办高等职业院校。学校始建于1976年，是国家高技能人才培训基地、全国“职业院校数字校园建设实验校”、四川省示范性高职院校、省优质高职院校建设培育单位、四川省信息化人才培训基地、四川省信息网络安全专业技术人员继续教育机构、四川省高技能人才培训基地、四川省教育信息化试点单位、广元市外派人员培训基地、广元市职业技能定点培训机构、广元市农村劳动力转移培训阳光工程培训基地、广元经济开发区高端技能型人才培训中心
            </p>
        </div>

        <!-- <div id="list-example" class="list-group">
            <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
            <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
            <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
            <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
        </div>
        <div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
            <h4 id="list-item-1">Item 1</h4>
            <p>...</p>
            <h4 id="list-item-2">Item 2</h4>
            <p>...</p>
            <h4 id="list-item-3">Item 3</h4>
            <p>...</p>
            <h4 id="list-item-4">Item 4</h4>
            <p>...</p>
        </div> -->

        <!-- <nav id="navbar-example3" class="navbar navbar-light bg-light">
            <a class="navbar-brand" href="#">Navbar</a>
            <nav class="nav nav-pills flex-column">
                <a class="nav-link" href="#item-1">Item 1</a>
                <nav class="nav nav-pills flex-column">
                <a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
                <a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
            </nav>
                <a class="nav-link" href="#item-2">Item 2</a>
                <a class="nav-link" href="#item-3">Item 3</a>
                <nav class="nav nav-pills flex-column">
                <a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
                <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
            </nav>
            </nav>
        </nav>
        <div data-spy="scroll" data-target="#navbar-example3" data-offset="0">
            <h4 id="item-1">Item 1</h4>
            <p>...</p>
            <h5 id="item-1-1">Item 1-1</h5>
            <p>...</p>
            <h5 id="item-1-2">Item 1-2</h5>
            <p>...</p>
            <h4 id="item-2">Item 2</h4>
            <p>...</p>
            <h4 id="item-3">Item 3</h4>
            <p>...</p>
            <h5 id="item-3-1">Item 3-1</h5>
            <p>...</p>
            <h5 id="item-3-2">Item 3-2</h5>
            <p>...</p>
        </div> -->


        <h2>模态框 </h2>
        <button class="btn btn-primary" data-toggle="modal" data-target="my_modal">显示模态框</button>

        <!-- 创建模态框 -->
        <div class="modal" id="#my_modal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        头部
                    </div>
                    <div class="modal-body">
                        身体
                    </div>
                    <div class="modal-footer">
                        底部
                    </div>
                </div>
            </div>
        </div>


        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
            Launch demo modal
        </button>
        
        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                </div>
                <div class="modal-body">
                ...
                </div>
                <div class="modal-footer">
                    <!-- data-dismiss="modal"关闭按钮 -->
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
            </div>
        </div>

        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
            Launch static backdrop modal
        </button>
        
        <!-- Modal -->
        <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                </div>
                <div class="modal-body">
                ...
                </div>
                <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Understood</button>
                </div>
            </div>
            </div>
        </div>

        <div class="modal-body">
            <h5>Popover in a modal</h5>
            <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
            <hr>
            <h5>Tooltips in a modal</h5>
            <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
        </div>


        <h2>卡片</h2>
        <div class="card mt-3 ">
            <!-- bg-success颜色 -->
            <!-- text-center字体居中对齐 -->
            <div class="card-header bg-success ">
                头部卡片 
                
            </div>
            <!-- class="card-img-top" 图片上边的圆角 -->
            <img class="card-img-top" src="img/img2.jpg" style="width:100px;height: 100px;">

            <!-- card-img-overflow图片覆盖文字 -->
            <div class="card-body card-img-overflow text-center">
                <!-- class="card-title"标题 -->
                <!-- class="card-text"正文 -->
                <h3 class="card-title"></h3>简单的卡片</h3>
                <p class="card-text">正文正文正文正文正文正文正文正文正文正文正文正文</p>
                <a href="#" class="card-link">连接</a>
            </div>

            <!-- class="card-img-top" 图片下边的圆角 -->
            <img class="card-img-bottom" src="img/img2.jpg" style="width:100px;height: 100px;">
            <div class="card-footer">
                底部卡片
            </div>
        </div> 
        




        <h2>列表组的使用</h2>
        <!-- list-group列表组 -->
        <!-- -item列表项 -->
        <!-- active激活 -->
        <!-- disabled禁用 -->
        <ul class="list-group">
            <li class="list-group-item ">信息工程系</li>
            <li class="list-group-item active">信息工程系</li>
            <li class="list-group-item">信息工程系</li>
            <li class="list-group-item disabled">信息工程系</li>
        </ul>

        <!-- list-group-item-action鼠标悬停效果 （背景潜灰色）-->
        <!-- list-group-item-success颜色值（绿色） -->
        <div class="list-group">
            <a href="#"class="list-group-item  list-group-item-success">信息工程系</a>
            <a href="#" class="list-group-item active list-group-item-action">信息工程系</a>
            <a href="#" class="list-group-item list-group-item-action">信息工程系</a>
            <a href="#" class="list-group-item disabled list-group-item-action">信息工程系</a>
        </div>



        <h2>多媒体对象</h2>
        <div class="media border p-3">
            <img src="img/img2.jpg" class="mr-1 mt-3" style="width:100px; height: 100px;">
            <h4>多媒体对象</h4>
            
        </div>


        <h2>多媒体对象芡套</h2>
        <div class="media">
            <!-- 媒体对象组件 -->
            <!-- class="align-self-center mr-3"居中对齐 -->
            <!-- class="align-self-end mr-3"底部对齐 -->
            <img src="img/img1.jpg" class="align-self-center mr-3" alt="..." >
            <div class="media-body">
                <h5 class="mt-0">Media heading</h5>
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
            
                    <div class="media mt-3">
                        <a class="mr-3" href="#">
                        <img src="img/img1.jpg" class="align-self-center mr-3" alt="...">
                        </a>
                        <div class="media-body">
                        <h5 class="mt-0">Media heading</h5>
                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                        </div>
                    </div>
                </div>
            </div>
    </div>
</body>
</html>